<template>
  <div>
    <van-nav-bar title="黑马优购" left-text="返回" left-arrow @click-left="onClickLeft" fixed />
    <div class="carRow">
      <van-row class="cartNav">
        <van-icon name="shop-o" style="padding-right:8px" />购物车列表
      </van-row>
      <van-row v-for="(item, index) in goodsList" :key="index">
        <van-swipe-cell>
          <van-col span="2">
            <van-checkbox
              v-model="item.is_promote"
              :name="item.goods_id"
              checked-color="red"
              class="abb"
              @change="changeThis"
            />
          </van-col>
          <van-col span="22">
            <van-card
              :price="item.goods_price"
              :title="item.goods_name"
              :thumb="item.goods_small_logo"
            >
              <div slot="footer">
                <van-stepper v-model="item.number" @change="onChange(item.goods_id,item.number)" />
              </div>
            </van-card>
          </van-col>
          <template class="dxx" slot="right">
            <van-button square type="danger" text="删除" @click="removeById(item.goods_id)" />
          </template>
        </van-swipe-cell>
      </van-row>
    </div>
    <van-submit-bar :price="changeTotal" button-text="提交订单" @submit="onSubmit">
      <van-checkbox v-model="checkedAll" checked-color="red" @click="checkAll">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
export default {
  data() {
    return {
      checkedAll: true,
      checkArr: []
    };
  },
  created() {
    this.changeThis()
    this.$store.commit("setIfShow", true);
  },
  methods: {
    onChange(id, num) {
      this.$store.commit("change", { id, num });
    },
    changeThis() {
      this.$store.commit("changeThis");
      this.checkArr = [];
      this.goodsList.forEach(item => {
        if (item.is_promote === true) {
          this.checkArr.push(item.goods_id);
        }
        if (this.checkArr.length < this.goodsList.length) {
          this.checkedAll = false;
        } else {
          this.checkedAll = true;
        }
      });
    },
    onSubmit() {
      this.$store.commit("submit");
      this.$router.push("/orders");
    },
    checkAll() {
      if (this.checkedAll) {
        this.$store.commit("closeAll");
      } else {
        this.$store.commit("openAll");
      }
    },
    removeById(id) {
      this.$store.commit("remove", id);
    },
    onClickLeft() {
      this.$router.go(-1);
    }
  },
  computed: {
    ...mapState(["goodsList", "total"]),
    ...mapGetters(["changeTotal"])
  }
};
</script>

<style lang="less" scoped>
.axx {
  width: 20px;
}
.abb {
  margin-top: 2.75em;
  margin-left: 0.5em;
}
.van-button--square {
  height: 132px;
}
.cartNav {
  margin-top: 40px;
  padding: 15px;
  display: flex !important;
  align-items: center;
}
.van-submit-bar {
  bottom: 50px;
}
.carRow {
  height: 600px;
  overflow-y: auto;
}
</style>
